<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" th:href="@{/static/iview/iview.css}" />
        <link rel="stylesheet" type="text/css" th:href="@{/static/iview/iview-custom.css}" />
    </head>
    <body>
        <div id="contentContainer" width="100%" height="100%" style="margin:15px">
            <!-- 按钮 -->
            <div style="margin-bottom:10px;margin-top:20px">
                <Button-group>
                    <i-button type="info" v-on:click="doAddButton()"><Icon type="ios-download-outline"></Icon>新增</i-button>
                    <i-button type="info" v-on:click="doUpdateButton()"><Icon type="ios-download-outline"></Icon>修改</i-button>
                    <i-button type="info" v-on:click="doDeleteButton()"><Icon type="ios-download-outline"></Icon>删除</i-button>
                    <i-button type="info" v-on:click="doAllotButton()"><Icon type="ios-download-outline"></Icon>分配权限</i-button>
                </Button-group>
            </div>

            <!-- 数据表格 -->
            <i-table border="true" :context="self" :columns="vueTableColumns" :data="vueTableData" v-on:on-selection-change="getCheckedTableRow($event)"></i-table>

            <!-- 分页标签 -->
            <div style="margin:10px;overflow:hidden">
                <div style="float:right">
                    <Page show-total="true" :page-size="vuePageSize" :total="vueRecordTotal" :current="vueCurrentPage" v-on:on-change="doPageTurning($event)"></Page>
                </div>
            </div>

            <!-- 新增 -->
            <Modal width="600" v-model="vueAddModalVisible" :styles="{top:'80px'}" title="增加角色">
                <i-form ref="vueAddForm" :model="vueAddForm" :rules="vueAddFormRules" :label-width="80">
                    <Form-item label="角色名称" prop="name">
                        <i-input v-model="vueAddForm.name" placeholder="请输入角色名称..."></i-input>
                    </Form-item>
                    <Form-item label="优先级别" prop="priority">
                        <i-input v-model="vueAddForm.priority" placeholder="0"></i-input>
                    </Form-item>
                </i-form>
                <!-- 自定义 modal 底部按钮 -->
                <div slot="footer">
                    <i-button type="primary" v-on:click="submitAddForm()">提交</i-button>
                    <i-button type="primary" v-on:click="resetVueFormData('vueAddForm')" style="margin-left:8px">重置</i-button>
                    <i-button type="primary" v-on:click="vueAddModalVisible=false" style="margin-left:8px">取消</i-button>
                </div>
            </Modal>

            <!-- 删除 -->
            <Modal v-model="vueDeleteModalVisible" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>删除确认</span>
                </p>
                <div style="text-align:center">
                    <p>{{vueDeleteMessage}} </p>
                </div>
                <div slot="footer">
                    <i-button type="error" :loading="vueDeleteProgressVisible" v-on:click="submitDeleteForm">删除</i-button>
                    <i-button type="primary" v-on:click="vueDeleteModalVisible=false">取消</i-button>
                </div>
            </Modal>

            <!-- 修改 -->
            <Modal width="600" v-model="vueUpdateModalVisible" :styles="{top:'50px'}" title="修改角色">
                <i-form ref="vueUpdateForm" :model="vueUpdateForm" :rules="vueUpdateFormRules" :label-width="80">
                    <Form-item label="角色名称" prop="name">
                        <i-input v-model="vueUpdateForm.name"></i-input>
                    </Form-item>
                    <Form-item label="优先级别" prop="priority">
                        <i-input v-model="vueUpdateForm.priority"></i-input>
                    </Form-item>
                </i-form>
                <!-- 自定义 modal 底部按钮 -->
                <div slot="footer">
                    <i-button type="primary" v-on:click="submitUpdateForm()">提交</i-button>
                    <i-button type="primary" v-on:click="vueUpdateModalVisible=false" style="margin-left:8px">取消</i-button>
                </div>
            </Modal>

            <!-- 复制 -->
            <Modal width="600" v-model="vueCopyModalVisible" :styles="{top:'50px'}" title="复制角色">
                <i-form ref="vueCopyForm" :model="vueCopyForm" :label-width="80">
                    <Form-item label="角色名称" prop="name">
                        <i-input v-model="vueCopyForm.name"></i-input>
                    </Form-item>
                    <Form-item label="优先级别" prop="priority">
                        <i-input v-model="vueCopyForm.priority"></i-input>
                    </Form-item>
                </i-form>
                <div slot="footer">
                    <i-button type="primary" v-on:click="submitCopyForm()">提交</i-button>
                    <i-button type="primary" v-on:click="vueCopyModalVisible=false" style="margin-left:8px">取消</i-button>
                </div>
            </Modal>

            <!-- 分配权限-->
            <Modal width="800" v-model="vueAllotModalVisible" :styles="{top:'50px'}"
                   title="分配权限" v-on:on-cancel="cancelAllotForm()">
                <i-form ref="vueAllotPermissionForm" :model="vueAllotPermissionForm" :label-width="80">
                    <Form-item
                        v-for="(item, index) in vueAllotPermissionForm.items"
                        :prop="'items.' + index +'.values'">
                        <Row>
                            <div style="border-bottom: 1px solid #e9e9e9">
                                <Checkbox
                                    :indeterminate="item.indeterminate"
                                    :value="item.checkAll"
                                    v-on:click.prevent.native="clickAllotCheckAll(index)">{{item.group}}</Checkbox>
                            </div>
                            <i-col
                                span="4"
                                v-for="(val,idx) in item.values"
                                :prop="'item.values[' + idx +']'">
                                <Checkbox v-model="item.values[idx]" v-on:on-change="changeAllotCheckAll(index)">{{item.names[idx]}}</Checkbox>
                            </i-col>
                        </Row>
                    </Form-item>
                </i-form>
                <div slot="footer">
                    <i-button type="primary" v-on:click="submitAllotForm()">提交</i-button>
                    <i-button type="ghost" v-on:click="resetAllotForm()" style="margin-left: 8px">重置</i-button>
                    <i-button type="ghost" v-on:click="cancelAllotForm()" style="margin-left:8px">取消</i-button>
                </div>
            </Modal>

        </div>

        <script th:src="@{/static/js/utils/table-utils.js}"></script>
        <script th:src="@{/static/js/utils/form-utils.js}"></script>
        <script th:src="@{/static/js/utils/iview-utils.js}"></script>

        <script th:src="@{/static/js/business/role-biz.js}"></script>
    </body>
</html>
